<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单格式校验</title>
    <!--引入外边js文件-->
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
        //页面加载事件
        $(function () {
            //账号不能为空
            var flag1 = false;
            //为账号输入框绑定失去焦点事件
            $("#username").blur(function(){
                //得到账号
                var username = $(this).val();
                //如果账号为空，设置不允许提交表单
                if(username==null || username.trim()==""){
                    alert("用户名不能为空");
                    flag1 = false;
                }else{
                    flag1 = true;
                }
            });

            //密码长度必须大于六位
            var flag2 = false;
            //为密码输入框绑定失去焦点事件
            $("#password").blur(function(){
                //得到密码
                var password = $(this).val();
                //如果密码小于六位，设置不允许提交表单
                if(password.length<=6){
                    alert("密码长度必须大于六位");
                    flag2 = false;
                }else{
                    flag2 = true;
                }
            });

            //两次密码必须一致
            var flag3 = false;
            //为确认密码输入框绑定失去焦点事件
            $("#repassword").blur(function(){
                //得到密码
                var password = $("#password").val();
                //确认密码
                var repassword = $(this).val();
                //如果密码和确认密码不一致，设置不允许提交表单
                if(password!=repassword){
                    alert("两次密码必须一致");
                    flag3 = false;
                }else{
                    flag3 = true;
                }
            });

            //三种都校验通过，提交表单
            $("form").submit(function(){
                return flag1&&flag2&&flag3;
            });
        });
    </script>
</head>
<body>
<form action="#" method="post">
    用户名:<input type="text" id="username"><br/>
    密码:<input type="text" id="password"><br/>
    确认密码:<input type="text" id="repassword"><br/>
    <input type="submit">
</form>
</body>
</html>